<!-- 学习统计（学习状态） -->
<template>
  <div>
    <div class="infobox">
      <div class="firstbox">
        <el-avatar :size="60" :src="avatar" />
        <em class="name">{{ username }}</em>
      </div>
      <div class="second">
        <ul>
          <li><em class="circle" style="background-color: #0099ff;"></em><span>知识类：</span><span
              class="score">{{ myscore.score1 }}分</span>
          </li>
          <li><em class="circle" style="background-color: #ff9966;"></em><span>技能类：</span><span
              class="score">{{ myscore.score2 }}分</span>
          </li>
          <li><em class="circle" style="background-color: #0000ff;"></em><span>素养类：</span><span
              class="score">{{ myscore.score3 }}分</span>
          </li>
        </ul>
      </div>
      <el-button round type="primary" @click="routerTototalGrade">综合成绩</el-button>
    </div>

    <div class="breadbox">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item replace :to="{ name: 'Learntotal' }">学习统计</el-breadcrumb-item>
        <el-breadcrumb-item v-show="currentCom == 'Totalgrade'" replace
          :to="{ name: 'Totalgrade' }">综合成绩</el-breadcrumb-item>
        <el-breadcrumb-item v-show="currentCom == 'Learntime'" replace
          :to="{ name: 'Learntime' }">学习时长</el-breadcrumb-item>
        <el-breadcrumb-item v-show="currentCom == 'Taskprogress'" replace
          :to="{ name: 'Taskprogress' }">任务进度</el-breadcrumb-item>
        <el-breadcrumb-item v-show="currentCom == 'Learntask'" replace
          :to="{ name: 'Learntask' }">学习任务</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-main class="showbox">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" @handleRouter="handleJump" />
        </keep-alive>
      </router-view>
    </el-main>
  </div>
</template>

<script setup>
import { ref, onMounted, onActivated, defineProps, inject } from 'vue'

import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

// 加载user模块 以及底下变量
import { storeToRefs } from 'pinia'
import useStore from '@/store'
const { user } = useStore()
let { username, avatar, uid } = storeToRefs(user)

// 导入请求路径
import api from '@/request/api'
// 注入网络请求方法
const axios = inject('axios')

// 定义props
const props = defineProps({
  lessonid: {
    default: 0,
    required: true,
    type: Number
  }
})

import { ArrowRight } from '@element-plus/icons-vue'

// 引入自定义雷达组件数据视图
// import radar from '@/components/echarts/radar.vue';
// import linecharts from '@/components/echarts/linecharts.vue';
// import pinecharts from '@/components/echarts/pinecharts.vue';

let currentCom = ref('')
let myscore = ref({})

// activated：在 keep-alive 组件激活时调用。
onActivated(() => {
  // 默认学习统计路由跳转
  router.replace({
    name: 'Learntotal',
    state: {
      uid: uid.value,
    }
  })

  // 请求综合评分
  getTotalScore(uid.value)
})

onMounted(() => {
  console.log('props.lessonid', props.lessonid)

})

async function getTotalScore(uid) {
  let res = await axios.post(api.myscore, { uid })
  console.log(res);
  if (res.code == 0) {
    myscore.value = res.data
  } else {
    showMessage('error', res.msg)
  }
}


function handleJump(obj) {
  console.log(obj);
  router.replace({
    name: obj.componentName,
    state: {
      uid: uid.value,
    }
  })
  currentCom.value = obj.componentName
}

function routerTototalGrade() {
  router.replace({
    name: 'Totalgrade',
    state: {
      uid: uid.value,
    }
  })
  currentCom.value = 'Totalgrade'
}

// 信息提示
const showMessage = (msgtype, msgstr) => {
  ElMessage({
    showClose: true,
    message: msgstr,
    type: msgtype,
    offset: 50
  })
}

</script>

<style scoped>
.top {
  display: flex;
}

.bottom {
  display: flex;
}
</style>

<style scoped>
.infobox {
  display: flex;
  align-items: center;
  width: 100%;
  height: 70px;
  margin: 0px auto;
  border-bottom: 1px solid #000;
  /* margin-bottom: 10px; */
}

.firstbox {
  display: flex;
  height: 100%;
  align-items: center;
  margin-left: 30px;
}

.name {
  position: relative;
  margin-left: 10px;
  font-size: 16px;
  cursor: pointer;
}

.second {
  margin-left: 420px;
  margin-right: 450px;
}

.second ul,
.second ul li {
  display: flex;
  align-items: center;
}

.second ul li {
  margin-right: 30px;
}

.second ul li span {
  font-size: 14px;
}

.second ul li .score {
  font-size: 16px;
}

.second ul li .circle {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: pink;
  margin-right: 6px;
}
</style>

<style scoped>
.breadbox {
  display: flex;
  height: 40px;
  align-items: center;
}

.showbox {
  width: 100%;
  height: 700px;
  /* background-color: pink; */
}
</style>
